<?php include _include(APP_PATH.'view/htm/header.inc.htm');?>
<div>
	<?php //print_r($plist); ?>
</div>
<div class="card">
	<div class="card-header">
		城市筛选
	</div>
	<div class="card-body">
		<div class="row">
			<div class="col-6">
				<table class="">按照省份选择</table>
				<div class="row">
					<div class="col-12 col-sm-4">
						<select class="custom-select" name="city-post" id="city-post">
							<?php foreach( $plist as $k => $p ){ ?>
								<option value="<?php echo $k ?>"><?php echo $p ?></option>
							<?php } ?>
						</select>
					</div>
				</div>
			</div>
			<div class="col-6 form-group">
					<table class="">按照城市名称搜索</table>
					<div class="row">
						<div class="col-12 col-sm-4">
							<input type="text" id="city-search" class="form-control" />
						</div>
					</div>
			</div>
		</div>
	</div>
</div>
<div class="row grid">
	<?php foreach( $plist as $v => $p ){ ?>
		<div pid="<?php echo $v;  ?>" class="col-12 col-lg-6 card-div">
			<div class="card">
				<div class="text-info card-header" style="font-size: 16px"><?php echo $p; ?></div>
				<div class="row card-body">
					<?php 
						$clist = arrlist_cond_orderby($citylist, array('province' => $p));
						foreach($clist as $c){
					?>
						<a href="<?php echo url('index-city-'.$c['cid']); ?>" city="<?php echo $c['city']; ?>" class="col-sm-2 col-4 d-inline-block text-truncate city">
							<?php echo $c['city']; ?>
						</a>
					<?php } ?>
				</div>
			</div>
		</div>
	<?php } ?>
</div>
<?php include _include(APP_PATH.'view/htm/footer.inc.htm');?>
<script src="/view/js/masonry.pkgd.min.js"></script>
<script>
	var cityselect = $('#city-post');
	var plist = $('.card-div');

	cityselect.on('change',function(){
		var select = cityselect.val();

		if(select == 0){
			plist.show(100);
		} else {
			plist.each(function(){
				var t = $(this);
				var pid = t.attr('pid');
				if( pid == select){
					t.show(100);
				} else {
					t.hide(100);
				}
			})
			
		}
		masonryUpdate();
	})

	var citysearch = $('#city-search');
	//var clist = $('.city');

	citysearch.on('change',function(){
		var search = citysearch.val();
		if(search == ''){
			plist.show(100);
		} else {
			$("a:not([city*='"+ search + "'])").closest('.card-div').hide(100);
			$("a[city*='"+ search + "']").closest('.card-div').show(100);
			
		}
		masonryUpdate();
	})

</script>
<script type="text/javascript">
	$('.grid').masonry({
		// options
		itemSelector: '.card-div',
		columnWidth: 0
	});
	var masonryUpdate = function() {
		setTimeout(function() {
			$('.grid').masonry();
		}, 200);
	}
</script>